<!-- @format -->

<template>
  <section class="ling-top-text have_task_wrap">
    <h2>已发布任务</h2>
    <div v-if="jobList.length > 0">
      <div class="result-list" v-for="item in jobList" :key="item.id">
        <div class="result-list-items ling-flex">
          <div class="van-ellipsis result-list-tit">{{ item.title }}</div>
          <span>{{ item.jobStatusDesc }}</span>
        </div>
        <div class="result-list-items">
          <time>{{ item.createTime | datefmt('YYYY-MM-DD') }}</time>
        </div>
        <div class="result-list-items">
          <div class="van-ellipsis result-list-company">
            <img width="20" :src="jobsImage" />
            <span>{{ item.industryName }}</span>
            <span>{{ item.positionName }}</span>
          </div>
          <span class="money">{{ item.budgetInfo }}</span>
        </div>
        <div class="check-btn">
          <span
            class="ling-linearButton"
            @click="$router.push(`issuedTaskDetail/${item.id}`)"
            >查看</span
          >
          <span
            v-if="item.jobStatus != 'FINISHED'"
            class="ling-linearPinkButton"
            @click="handleFinish(item.id, item.description)"
            >完成</span
          >
        </div>
      </div>
    </div>
    <div v-else class="no-task">暂无发布任务</div>
  </section>
</template>

<script>
import jobsImage from '@/assets/images/jobs.png'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')
export default {
  name: 'haveTaskPage',
  data() {
    return {
      jobsImage
    }
  },
  components: {},
  inject: ['reload'],
  computed: {
    ...mapState(['jobList'])
  },
  created() {
    this.getJobList()
  },
  methods: {
    ...mapActions(['getJobList', 'editJobStatus']),
    handleFinish(jobId, description) {
      this.$dialog
        .confirm({
          title: '确认完成该任务吗？',
          message: description
        })
        .then(async () => {
          const response = await this.editJobStatus({
            jobId,
            jobStatus: 'FINISHED'
          })
          this.reload()
          // console.log(response, 'releaserelease')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.have_task_wrap {
  background: #f5f5f5;
  h2 {
    margin-bottom: 9px;
    border: none;
  }
  .result-list {
    background: white;
    padding: 5px 20px;
    margin-bottom: 10px;
    position: relative;
    .result-list-items {
      display: flex;
      line-height: 30px;
      .result-list-tit {
        width: 180px;
        color: #333;
        font-size: 14px;
      }
      span {
        font-size: 12px;
        color: #333333;
      }
      .money {
        font-size: 14px;
        color: #7ac5ef;
        .filter-items-icons {
          font-size: 10px;
          color: #666666;
          position: relative;
          right: -3px;
        }
      }
      .result-list-jobs,
      .result-list-company {
        width: 98px;
        color: #999;
        font-size: 10px;
        img {
          margin-right: 10px;
        }
        span {
          margin-right: 8px;
        }
      }
      time {
        font-size: 10px;
        color: #999999;
      }
    }
    .check-btn {
      position: absolute;
      right: 18px;
      bottom: 10px;
      span {
        width: 60px;
        height: 30px;
        display: inline-block;
        line-height: 30px;
        color: white;
        font-size: 12px;
      }
      span:last-child {
        // background: linear-gradient(
        //   32deg,
        //   rgba(122, 197, 239, 1) 0%,
        //   rgba(219, 231, 255, 1) 100%
        // );
        // box-shadow: 0px 8px 20px rgba(122, 197, 239, 0.2);
        margin-left: 15px;
      }
    }
  }
}
</style>
